<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 1,箭头函数=>返回map对象
        const makeMap = () => {
            return {
                key: "value"
            }
        };
        //简洁的写法
        const makeMap = () => ({
            key: "value"
        });
        // 2. 对象属性名不确定，需要动态的传入
        // 一般的写法
        const makeMap = (key, value) => {
            const obj = {};
            obj[key] = value;
            return obj;
        };

        // 简洁的写法
        const makeMap = (key, value) => ({
            [key]: value
        });
        // 3. 复制一个对象， 并重写其中的一些属性
        const source = {
            hello: 'hello',
            hi: 'hi'
        };

        // 一般的写法
        const target = Object.assign({}, source);
        target.hello = 'hello everyone';

        // 简洁的写法
        const target = {...source,
            hello: 'hello everyone'
        };

        // 4. 数组解构为函数参数
        const arr = [1, 2, 3];
        const plus = (...args) => args.reduce((a, b) => a + b);

        // 一般的写法
        plus(arr[0], arr[1], arr[2], 4, 5);

        // 简洁的写法
        plus(...arr, 4, 5);
        // 5. 向一个数组添加另一数组的所有元素
        const arr1 = [1, 2, 3];
        const arr2 = [4, 5, 6];

        // 一般的写法
        arr1 = arr1.concat(arr2);

        // 简洁的写法
        arr1.push(...arr2);
        // 6. 回调函数简写
        // 一般的写法
        promise.catch(e => {
            console.log(e);
        });

        // 简洁的写法
        promise.catch(console.log);
        // 7. 多级箭头函数 =>
        // 一般的写法
        const makeTimesFunc = times => {
            return value => {
                return value * times;
            };
        };

        // 简洁的写法
        const makeTimesFunc = times => value => value * times;
        // 8. 从右向左函数复式调用
        // 不确定元素个数，举例 3 个
        const fnCollection = [str => `${str} | fisrt`, str => `${str} | second`, str => `${str} | third`];

        // 一般的写法
        const addManySuffixes = str => {
            let result = str;
            for (let i = fnCollection.length - 1; i > -1; i -= 1)
                result = fnCollection[i](result);

            return result;
        };

        // 简洁的写法
        const addManySuffixes = fnCollection.reduce((a, b) => str => a(b(str)));
        // 可以把 str 参数扩展成任意参数
        const addManySuffixes = fnCollection.reduce((a, b) => (...args) => a(b(...args)));
    </script>
</body>

</html>